<template>
  <view class="points-container">
    <!-- 顶部用户信息卡片 -->
    <view class="user-info-card">
      <view class="user-info">
        <image class="avatar bg-color-1" src="/static/default-avatar.png" mode="aspectFill"></image>
        <view class="info-text">
          <text class="name">站长姓名</text>
          <text class="station-name">加油站名称</text>
        </view>
        <view class="points-info" @click="myPointClick">
          <text class="points-label">我的积分：</text>
          <text class="points-value">500</text>
          <image class="points-icon bg-color-2" src="/static/points-icon.png" mode="aspectFit"></image>
        </view>
      </view>
    </view>

    <!-- 积分兑换标题 -->
    <view class="section-title">
      <text>积分兑换</text>
      <image class="title-icon bg-color-3" src="/static/exchange-icon.png" mode="aspectFit"></image>
    </view>

    <!-- 积分兑换列表 -->
    <view class="exchange-list">
      <view class="exchange-item" v-for="(item, index) in exchangeItems" :key="index" @click="pointClick(item)">
        <image class="product-image bg-color-4" src="/static/product.png" mode="aspectFill"></image>
        <view class="product-info">
          <text class="product-name">商品名称</text>
          <view class="points-required">
            <text class="points-text">积分数量：</text>
            <text class="points-number">2000</text>
          </view>
        </view>
        <image class="exchange-icon bg-color-5" src="/static/exchange-btn.png" mode="aspectFit"></image>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

// 兑换商品列表数据
const exchangeItems = ref([
  { id: 1, name: '商品名称', points: 2000 },
  { id: 2, name: '商品名称', points: 2000 },
  { id: 3, name: '商品名称', points: 2000 },
  { id: 4, name: '商品名称', points: 2000 }
])

function pointClick(item) {
	uni.navigateTo({
	   url: '/pages/points/detail?id='+item.id
	})
}
function myPointClick(){
	uni.navigateTo({
	 url: '/pages/points/points-detail'
	})
}
</script>

<style>
.points-container {
  min-height: 100vh;
  background-color: #F5F5F5;
  padding: 20rpx;
}

/* 用户信息卡片样式 */
.user-info-card {
  background: #FFFFFF;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  border: 2rpx solid #EEF5FF;
}

.user-info {
  display: flex;
  align-items: center;
}

.avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
  margin-right: 20rpx;
}

.info-text {
  flex: 1;
}

.name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
  display: block;
}

.station-name {
  font-size: 24rpx;
  color: #999999;
  margin-top: 4rpx;
}

.points-info {
  display: flex;
  align-items: center;
}

.points-label {
  font-size: 28rpx;
  color: #333333;
}

.points-value {
  font-size: 28rpx;
  color: #1890FF;
  font-weight: bold;
  margin-right: 8rpx;
}

.points-icon {
  width: 32rpx;
  height: 32rpx;
}

/* 积分兑换标题样式 */
.section-title {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
  margin: 20rpx 0;
}

.section-title text {
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
}

.title-icon {
  width: 32rpx;
  height: 32rpx;
  margin-left: 8rpx;
}

/* 积分兑换列表样式 */
.exchange-list {
  background: #FFFFFF;
  border-radius: 12rpx;
  padding: 20rpx;
}

.exchange-item {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #EEEEEE;
}

.exchange-item:last-child {
  border-bottom: none;
}

.product-image {
  width: 160rpx;
  height: 120rpx;
  border-radius: 8rpx;
  margin-right: 20rpx;
}

.product-info {
  flex: 1;
}

.product-name {
  font-size: 28rpx;
  color: #333333;
  margin-bottom: 12rpx;
  display: block;
}

.points-required {
  display: flex;
  align-items: center;
}

.points-text {
  font-size: 24rpx;
  color: #999999;
}

.points-number {
  font-size: 24rpx;
  color: #1890FF;
}

.exchange-icon {
  width: 40rpx;
  height: 40rpx;
}

/* 背景色类 */
.bg-color-1 {
  background-color: #E3F2FD;
}

.bg-color-2 {
  background-color: #1890FF;
}

.bg-color-3 {
  background-color: #4CAF50;
}

.bg-color-4 {
  background-color: #F5F5F5;
}

.bg-color-5 {
  background-color: #1890FF;
}
</style> 